<template>
  <el-row style="margin: 10px">
    <el-col :span="24">
      <el-table
          :data="materialBomList"
          stripe
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed="left" prop="material.code" label="BOM物料编码"/>
        <el-table-column fixed="left" prop="material.name" label="BOM物料名称"/>
        <el-table-column fixed="left" prop="material.specification" label="规格型号"/>
        <el-table-column prop="material.unit.name" label="单位"/>
        <el-table-column prop="usageRatio" label="预计使用剂量"/>
        <el-table-column prop="remarks" label="备注"/>
        <el-table-column label="操作" width="200" fixed="right"/>
      </el-table>
    </el-col>
  </el-row>
  <el-row style="margin: 10px">
    <el-col :span="24">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-col>
  </el-row>

</template>

<script setup>
import { ref, reactive, toRaw, watch, onMounted } from 'vue'
import {getMaterialBomPage,getMaterialBomById,} from "@/api/material-bom.js";
import {getDictDataList} from "@/api/dictData.js";
import {getProcessList} from "@/api/process.js";
import {ElMessage,ElMessageBox} from "element-plus";
import {getMaterialByCode} from "@/api/material.js";

const total = ref(0)
const page = ref(1)
const size = ref(10)

const materialBomProductForm = reactive({
  material:{unit:{}},
  materialBomCode:'',
  usageRatio:'',
  remarks:'',
  productionOrderId:'',
  id:''
})
const isEdit = ref(false);
const selectedRows = ref([]);
const isCanDelete = ref(true)
const materialBomListDialogVisable = ref(false);

const props = defineProps({
  productionOrderId: {
    type: Number
  }
})
//数据列表
const materialBomList = ref([])
watch(() => props.productionOrderId, (newValue, oldValue) => {
  if (newValue) {
    getmaterialBomList()
  }
})

const handlerSelectmaterialBom = (materialBomCode)=>{
  getMaterialByCode(materialBomCode).then(res=>{
    console.log(res);
    materialBomProductForm.materil = res.data
    materialBomListDialogVisable.value = false;
  })
}
const showMaterialBomListList = ()=>{
  materialBomListDialogVisable.value = true;
  console.log("???")
}

onMounted(()=>{
  getmaterialBomList();
})

const handleSelectionChange = (srs)=>{
  selectedRows.value = [];
  srs.forEach(row=>{
    selectedRows.value.push(row);
  })
  console.log(selectedRows.value)
  if(selectedRows.value.length > 0){
    isCanDelete.value = false;
  }else{
    isCanDelete.value = true;
  }
}

const getmaterialBomList = () => {
  getMaterialBomPage(page.value, size.value, {
    productionOrderId: props.productionOrderId
  }).then(res => {
    materialBomList.value = res.data.list
    total.value = res.data.total
  })
}

</script>

<style scoped>

</style>